<template>
	<view>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#a0cad9">
		</uni-segmented-control>
		<view class="content">
			<view v-if="current === 0">
				<template>
					<uni-search-bar placeholder="点击进行终端搜索或条件筛选" cancelButton="none" @confirm="searchBarSearch" @input="searchBarInput" ></uni-search-bar>
				</template>

				<uni-list>
					<MyListItem v-for="(one, index) in fastList" :key="index" :title="one.speechText"
						:note="getTerminalString(one.terminal)" :time="one.time" :show-extra-icon="true"
						:extra-icon="{color: '#c1d9c6',size: '22',type: 'sound-filled'}" to="/pages/functions/tool_bar/message/message_detail">
						<template v-slot:footer>
							<view style="align-items: center;">
								<button @click.stop="toggle($refs.popup1,index)" style="border-style: none;" plain="true"><uni-icons type="more-filled" size="25" color="#b1b1b1"></uni-icons></button>
							</view>
						</template>
					</MyListItem>
				</uni-list>
			</view>
			<view v-show=" current===1">
				<template>
					<uni-search-bar placeholder="点击进行终端搜索或条件筛选" cancelButton="none" @confirm="searchBarSearch" @input="searchBarInput" ></uni-search-bar>
				</template>
				
				<uni-list>
					<uni-list-item v-for="(one, index) in nfcRecord" :key="index" :title="one.speechText"
						:note="getTerminalString(one.terminal)" :rightText="one.time" :show-extra-icon="true"
						:extra-icon="{color: '#c1d9c6',size: '22',type: 'compose'}" to="/pages/functions/tool_bar/message/message_detail">
						<template v-slot:footer>
							<view style="align-items: center;">
								<button @click.stop="toggle($refs.popup1,index)" style="border-style: none;" plain="true"><uni-icons type="more-filled" size="25" color="#b1b1b1"></uni-icons></button>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<view v-show="current === 2">
				<template>
					<uni-search-bar placeholder="点击进行终端搜索或条件筛选" cancelButton="none" @confirm="searchBarSearch" @input="searchBarInput" ></uni-search-bar>
				</template>
				
				<uni-list>
					<uni-list-item v-for="(one, index) in gpsRecord" :key="index" :title="one.speechText"
						:note="getTerminalString(one.terminal)" :rightText="one.time" :show-extra-icon="true"
						:extra-icon="{color: '#c1d9c6',size: '22',type: 'compose'}" to="/pages/functions/tool_bar/message/message_detail">
						<template v-slot:footer>
							<view style="align-items: center;">
								<button @click.stop="toggle($refs.popup1,index)" style="border-style: none;" plain="true"><uni-icons type="more-filled" size="25" color="#b1b1b1"></uni-icons></button>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</view>
		
		<uni-popup ref="popup1" background-color="#fff" @change="change" style="bor">
			<view class="popup-content" style="width: 250px;">
				<uni-list>
					<uni-list-item :clickable="true" class="menu-item" @click="edit">
						<template v-slot:body>
							<view style="width: 100%;" class="menu-item-box">
								编辑
							</view>
						</template>
					</uni-list-item>
					<uni-list-item :clickable="true" class="menu-item" @click="del">
						<template v-slot:body>
							<view style="width: 100%;color: #FF5A5F;" class="menu-item-box">
								删除
							</view>
						</template>
					</uni-list-item>
					<uni-list-item :clickable="true" class="menu-item"@click="closepopup">
						<template v-slot:body>
							<view style="width: 100%;" class="menu-item-box" >
								返回
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</uni-popup>
		
		<view>
			<!-- <button class="fab-button" @click="fastSpeech" type="primary">快语音</button> -->
			<FabBtn btnValue="快语音" :callback="fastSpeech"></FabBtn>
		</view>
	</view>
</template>

<script>
	import FabBtn from "@/components/FabBtn.vue";
	import MyPopup from "@/components/MyPopup.vue";
	import MyListItem from "@/components/MyListItem.vue"
	import request from "@/common/request.js";
	export default {
		components: {
			FabBtn, MyPopup, MyListItem
		},
		data() {
			return {
				current: 0,
				items: ["快语音", "nfc记录", "gps记录"],
				inputValue: "",
				fastList: [{
						time: "2021",
						speechText: "dadasd",
						terminal: [
							"new t0", "new t1"
						]
					},
					{
						time: "2021 01 20",
						speechText: "dadasdadd",
						terminal: [
							"new t2", "new t1"
						]
					},
					{
						time: "2021",
						speechText: "dadas adasdasdasdsad",
						terminal: [
							"new t4", "new t3"
						]
					}
				],
				nfcRecord: [{
						time: "2021",
						speechText: "nfcRec1",
						terminal: [
							"new t0", "new t1"
						]
					},
					{
						time: "2021 01 20",
						speechText: "nfcRec2",
						terminal: [
							"new t2", "new t1"
						]
					},
					{
						time: "2021",
						speechText: "nfcRec3",
						terminal: [
							"new t4", "new t3"
						]
					}
				],
				gpsRecord: [{
						time: "2021",
						speechText: "gpsRec1",
						terminal: [
							"new t0", "new t1"
						]
					},
					{
						time: "2021 01 20",
						speechText: "gpsRec2",
						terminal: [
							"new t2", "new t1"
						]
					},
					{
						time: "2021",
						speechText: "gpsRec3",
						terminal: [
							"new t4", "new t3"
						]
					}
				],
				
				LocalParam: [{
					teamID: "",
					terminalID: "",
					beginDate: "",
					endDate: "",
					status: "",
					messageID: "",
					pageNum: "",
					pageSize: ""
				}]
			}
		},
		mounted() {
			
		},
		methods: {
			onClickItem(e) {
				this.current = e.currentIndex
				// console.log(e)
			},
			onKeyInput(event) {
				this.inputValue = event.target.value
			},
			getTerminalString(arr) {
				var res = ""
				for (var t in arr) {
					if (t == arr.length - 1) {
						res += arr[t]
						break;
					} else {
						res += arr[t] + ","
					}
				}

				return res
			},
			searchBarSearch(e){
				console.log(e)
			},
			searchBarInput(e){
				console.log(e)
			},
			fastSpeech(){
				console.log("you clicked fast-speech..")
				uni.navigateTo({
					url:"./send_message"
				})
				
			},
			/* edit */
			edit(){
				console.log("edit")
				/* this.$router.push({path: '/pages/functions/tool_bar/nfc_plan/create_plan'}) */
				uni.navigateTo({
					url:""
				})
			},
			/* 展开编辑弹窗*/
			toggle(e,item,type) {
				console.log(item)
				e.open(type)
			},
			/* 弹窗状态变化触发 */
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			/* 关闭弹窗 */
			closepopup(){
				this.$refs.popup1.close()
			},
			del(){
				console.log("delete");
			},
			
			/* 载入gps表单数据 */
			getGPSdata(type){
				let opts={
					url: '/business/gpsRecord/list',
					method: 'get'
				};
				
				console.log("加载定位记录信息");
				
				uni.showLoading({
					title : '加载中'
				});
				
				request.httpTokenRequest(opts).then(res => {
								uni.hideLoading();
								if (res.code == 200) {
									console.log(res);
									this.gpsRecord = res.data.data;
								} else {
									console.log("请求失败");
								}
							});
			},
			
			/* 载入快语音表单数据 */
			getMSGdata(type){
				let opts={
					url: '/business/msgMessage/list',
					method: 'get'
				};
				
				console.log("加载快语音记录信息");
				
				uni.showLoading({
					title : '加载中'
				});
				
				request.httpTokenRequest(opts,this.LocalParam).then(res => {
								uni.hideLoading();
								if (res.code == 200) {
									console.log(res);
									this.fastList = res.data.data;
								} else {
									console.log("请求失败");
								}
							});
			},
			
			/* 载入nfc表单数据 */
			getNFCdata(type){
				let opts={
					url: '/business/nfcRecord/list ',
					method: 'get'
				};
				
				console.log("加载nfc记录信息");
				
				uni.showLoading({
					title : '加载中'
				});
				
				request.httpTokenRequest(opts,this.LocalParam).then(res => {
								uni.hideLoading();
								if (res.code == 200) {
									console.log(res);
									this.nfcRecord = res.data.data;
								} else {
									console.log("请求失败");
								}
							});
			}
		}
	}
</script>

<style>
	.fab-button{
		position: fixed;
		bottom: 80px;
		right: 25px;
		width:65px;
		height: 65px;
		line-height: 65px;
		border-radius:50%;
		box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 28px 0 rgba(0, 0, 0, 0.19);
		font-size: 5px;
	}
	.menu-item{
		width: 100%;
	}
	.menu-item-box{
		width: 100%;
		text-align: center;
		align-items: center;
	}
</style>
